<template>
	<view class="page">
		<view class="page__body">
			<textarea :maxlength="-1" v-model="content" placeholder="请输入内容" />
		</view>
		<view class="" style="background-color: #fff;border-top: 1rpx solid #eee;">
			<view class="" style="display: flex;align-items: center;padding: 20rpx;justify-content: space-between;height: 160rpx;">
				<view class="" style="font-size: 25rpx;color: #aaa;width: 80rpx;">日期：</view>
				<view class="" style="width: 240rpx;">
					<input type="text" v-model="weekStart" disabled @click="weekDateClick" />
				</view>
				<view class="" style="margin: 0 10rpx;">~</view>
				<view class="" style="width: 240rpx;"> 
					<input type="text" v-model="weekEnd" disabled @click="weekDateClick" />
				</view>
				<view class="" style="margin-left: 20rpx;">
					<text style="font-size: 45rpx;color: #888888;">{{week}}</text>
					<text style="font-size: 25rpx;margin-left: 10rpx;">周</text>
				</view>
			</view>
			<view class="dates" style="height: 140rpx;">
				<view class="dates__item" v-for="(v,i) in weeks" :key="v.name">
					<view class="" style="font-size: 25rpx;color: #aaa;">{{v.name}}</view>
					<view class="">
						<checkbox-group @change="checkboxChange(i)">
							<checkbox :value="v.name" :checked="v.checked" />
						</checkbox-group>
					</view>
				</view>
			</view>
			<view class="work-num" style="height: 120rpx;">
				<view class="work-num__title" style="font-size: 25rpx;color: #aaa;">工作量：</view>
				<view class="" style="flex: 1;">
					<u-slider v-model="number" activeColor="#3c9cff" inactiveColor="#c0c4cc"></u-slider>
				</view>
				<view class="" style="width: 100rpx;display: flex;margin-right: 20rpx;">
					<input type="number" v-model="number" maxlength="2" />
					<text>%</text>
				</view>
			</view>
			<view class="work-num" style="height: 120rpx;">
				<view class="work-num__title" style="font-size: 25rpx;color: #aaa;width: 140rpx;">完成情况：</view>
				<view class="work-num__value" style="flex: 1;">
					<radio-group style="display: flex;">
						<label class="radio" style="display: flex;width: 120rpx;" @click="current = 0">
							<radio value="r1" :checked="current == 0" />
							<view class="">完成</view>
						</label>
						<label class="radio" style="display: flex;width: 150rpx;" @click="current = 1">
							<radio value="r1" :checked="current == 1" />
							<view class="">进行中</view>
						</label>
						<label class="radio" style="display: flex;flex: 1;" @click="current = 2">
							<radio value="r2" :checked="current == 2" />
							<input style="width: 100%;font-size: 30rpx;" type="text" maxlength="20" v-model="unFinishValue" />
						</label>
					</radio-group>
				</view>
			</view>
			<view class="work-num" style="height: 120rpx;">
				<view class="work-num__title" style="font-size: 25rpx;color: #aaa;">备注：</view>
				<view class="work-num__value" style="flex: 1;margin-right: 20rpx;">
					<input style="width: 100%;text-align: left;font-size: 25rpx;" type="text" v-model="bz" placeholder="（可选）" />
				</view>
			</view>
			<view class="page__btn" style="margin-bottom: 40rpx;">
				<u-button type="primary" color="#2979ff" :customStyle="{'height': '100rpx'}" text="确定" @click="confirm"></u-button>
			</view>
		</view>

		<datetime-picker ref="Date" type="date" :border="false" returnType="date" v-model="date" hide-second
			@change="confirmDate" />
	</view>
</template>

<script>
	import moment from 'moment'
	import _custom from '@/common/_custom.js'
	import { getWeekInYear2 } from '@/common/custom_util.js'
	import DatetimePicker from '@/components/custom/datetime-picker/uni-datetime-picker.vue'
	import _data from '@/common/_data.js'

	export default {
		components: {
			DatetimePicker
		},
		data() {
			return {
				obsusername: _data.localData('name'),
				date: moment().format('YYYY-MM-DD'),
				data: {},
				number: 0,
				content: '',
				weeks: [{
						name: '周一',
						checked: false,
					},
					{
						name: '周二',
						checked: false,
					},
					{
						name: '周三',
						checked: false,
					},
					{
						name: '周四',
						checked: false,
					},
					{
						name: '周五',
						checked: false,
					},
					{
						name: '周六',
						checked: false,
					},
					{
						name: '周日',
						checked: false,
					},
					{
						name: '加班',
						checked: false,
					},
				],
				current: 0,
				bz: '',
				unFinishValue: '未完成',
				week: '', //第几周
				weekStart: moment().startOf('isoWeek').format('YYYY-MM-DD'),
				weekEnd: moment().endOf('isoWeek').format('YYYY-MM-DD'),
				type: '',//类型，edit: 编辑页，current-add：本周新增，next-add：下周新增
				week: -1,
			}
		},
		onLoad(options) {
			this.data = JSON.parse(options.data);
			this.type = this.data.type;
			if(this.type == 'edit') {
				this.format()
			}
			this.week = getWeekInYear2(this.weekStart)
		},
		methods: {
			/**
			 * 获取用户最新一份周报列表数据
			 */
			getWeekReportListByFlag() {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'getWeekReportListByFlag',
						apiparam: {
							obsusername: this.obsusername,
							rbuser: this.obsusername,
							flag: this.week
						},
						success(res) {
							let currentWeek = [];
							let nextWeek = [];
							res.forEach(item => {
								if(item.pid[0] == '1') currentWeek.push(item.pid*1)
								if(item.pid[0] == '3') nextWeek.push(item.pid*1)
							})
							if(that.type == 'current-add') {
								let pid = 1000;
								currentWeek.forEach(v => {
									if(v > pid) pid = v
								})
								pid == 1000 ? resolve(1001) : resolve(++pid);
							}
							if(that.type == 'next-add') {
								let pid = 3000;
								nextWeek.forEach(v => {
									if(v > pid) pid = v
								})
								pid == 3000 ? resolve(3001) : resolve(++pid);
							}
							
						}
					})
				})
			},
			/**
			 * 增加周报数据
			 */
			addWeekReport(apiparam) {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'addWeekReport',
						code: 3,
						apiparam,
						success(res) {
							uni.showToast({
								title: '添加成功!',
								icon: 'none'
							})
							resolve()
						},
						fail() {
							uni.showToast({
								title: '添加失败!',
								icon: 'none'
							})
							reject()
						}
					})
				})
			},
			/**
			 * 修改周报
			 */
			updateWeekReport(apiparam) {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'updateWeekReport',
						code: 2,
						apiparam,
						success(res) {
							uni.showToast({
								title: '修改成功!',
								icon: 'none'
							})
							resolve()
						},
						fail() {
							uni.showToast({
								title: '修改失败!',
								icon: 'none'
							})
							reject()
						}
					})
				})
			},
			/**
			 * 确认
			 */
			async confirm() {
				if(!this.content.trim()) {
					uni.showToast({
						title: '内容不能为空',
						icon: 'none'
					})
					return
				}
				if(!this.number) {
					uni.showToast({
						title: '工作量不能为0',
						icon: 'none'
					})
					return
				}
				let wancheng = '';
				if(this.current == 0) {
					wancheng = '完成';
				} else if(this.current == 1) {
					wancheng = '进行中';
				} else if(this.current == 2) {
					wancheng = this.unFinishValue;
				}
				let apiparam = {
					id: this.type == 'edit' ? this.data.id : '',
					pid: this.type == 'edit' ? this.data.pid : '',
					name: this.content.trim(),
					a1: '',
					a2: '',
					a3: '',
					a4: '',
					a5: '',
					a6: '',
					a7: '',
					a8: '',
					gongzuoliang: this.number/100,
					wancheng: wancheng,
					flag: this.week,
					rbdate: moment().format('YYYY-MM-DD'),
					rbuser: this.obsusername,
					nian: moment(this.weekStart).year(),
					bz: this.bz
				}
				let flag = false;
				this.weeks.forEach((item,index) => {
					if(item.checked) {
						apiparam['a' + (index+1)] = '√';
						flag = true
					}
				})
				if(!flag) {
					uni.showToast({
						title: '至少选择一天',
						icon: 'none'
					})
					return
				}
				if(this.type == 'edit') {
					this.updateWeekReport(apiparam).then(() => {
						setTimeout(() => {
							uni.navigateBack()
						}, 300)
					})
				} else {
					apiparam.pid = await this.getWeekReportListByFlag()
					this.addWeekReport(apiparam).then(() => {
						setTimeout(() => {
							uni.navigateBack()
						}, 300)
					})
				}
			},
			/**
			 * 处理传递的数据
			 */
			format() {
				for (let i = 0; i < this.weeks.length; i++) {
					if (this.data['a' + (i + 1)]) {
						this.weeks[i].checked = true;
					}
				}
				if (this.data.wancheng == '完成') {
					this.current = 0;
				} else if(this.data.wancheng == '进行中'){
					this.current = 1;
				} else {
					this.current = 2;
					this.unFinishValue = this.data.wancheng;
				}
				this.weekStart = moment(this.data.rbdate).startOf('isoWeek').format('YYYY-MM-DD')
				this.weekEnd = moment(this.data.rbdate).endOf('isoWeek').format('YYYY-MM-DD')
				this.number = this.data.gongzuoliang * 100;
				this.bz = this.data.bz
				this.content = this.data.name;
			},
			/**
			 * 点击日期范围文字
			 */
			weekDateClick() {
				this.$refs.Date.show()
			},
			/**
			 * 确认日期
			 * @param {Object} e
			 */
			confirmDate(e) {
				this.weekStart = moment(e).startOf('isoWeek').format('YYYY-MM-DD')
				this.weekEnd = moment(e).endOf('isoWeek').format('YYYY-MM-DD')
				this.week = getWeekInYear2(this.weekStart);
			},
			/**
			 * 选中事件
			 * @param {Object} e
			 */
			checkboxChange(i) {
				this.weeks[i].checked = !this.weeks[i].checked
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {

		&__body {
			height: 500rpx;
			/* #ifdef H5 */
			height: 400rpx;
			/* #endif */
			border-bottom: 1rpx solid #eee;
			background-color: #fff;
			padding: 40rpx;

			textarea {
				width: 100%;
				height: 100%;
			}
		}

		&__btn {
			padding: 20rpx;
			padding-bottom: 40rpx;
			box-sizing: border-box;
		}
	}

	.work-num {
		display: flex;
		align-items: center;
		padding-left: 20rpx;

		&__title {
			margin-right: 5rpx;
		}

		&__value {
			display: flex;

			input {
				width: 80rpx;
				text-align: center;
				border-bottom: 1rpx solid #000;
			}
		}
	}

	.dates {
		display: flex;
		justify-content: space-around;

		&__item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #aaa;
		}
	}

	input {
		width: 100%;
		text-align: center;
		border-bottom: 1rpx solid #000;
	}
	
	.dates /deep/ uni-checkbox .uni-checkbox-input {
		margin-right: 0;
	}
</style>
